﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="form,layer"></script>
    <script src="../scripts/common.js"></script>
    <!--<script src="../src/js/modules/form.js"></script>-->

    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }

        .div[class^=raypreventAutoInputDiv] {
            margin-top: -20px;
            left: 0 !important;
        }
    </style>
</head>
<body>
    <h3>方法-preventAutoInput(time, callback, isStrength)</h3>
    <div class="card card-color-blue">
        <p>实现原理：在form最前面增加n个input框，500毫秒后再进行移除，500毫秒可以自定义</p>
        <p>1、当前方法只在chrome浏览器(71.0.3578.98)、360急速浏览器(9.1.0.434)、firefox浏览器(65)测试通过，不能保证所有浏览器及版本都能使用</p>
        <p>2、使用该方法时，form.js不能使用异步加载方式，即不能使用rayui.use方式，方法也不能写到rayui.ready()方法里</p>
    </div>

    <h3>1、不做处理</h3>
    <form>
        <input type="text" class="rayui-input" placeholder="请输入用户名" />
        <input type="password" class="rayui-input" placeholder="请输入密码" />
        <button type="submit" class="rayui-btn">有form无name</button>
    </form>

    <form>
        <input type="text" name="username" class="rayui-input" placeholder="请输入用户名" />
        <input type="password" name="password" class="rayui-input" placeholder="请输入密码" />
        <button type="submit" class="rayui-btn">有form有name</button>
    </form>

    <div>
        <input type="text" class="rayui-input" placeholder="请输入用户名" />
        <input type="password" class="rayui-input" placeholder="请输入密码" />
        <button type="submit" class="rayui-btn">无form无name</button>
    </div>

    <div>
        <input type="text" name="username" class="rayui-input" placeholder="请输入用户名" />
        <input type="password" name="password" class="rayui-input" placeholder="请输入密码" />
        <button type="submit" class="rayui-btn">无form有name</button>
    </div>



    <h3>2、有form，不自动填充-preventAutoInput()</h3>
    <form id="form2">

        <input type="text" class="rayui-input" placeholder="请输入用户名" />
        <input type="password" class="rayui-input" placeholder="请输入密码" />

        <button type="submit" class="rayui-btn">不自动填充</button>
    </form>

    <h3>3、没有form，不自动填充-preventAutoInput()</h3>
    <div id="form3">

        <input type="text" class="rayui-input" placeholder="请输入用户名" value="1111" />
        <input type="password" class="rayui-input" placeholder="请输入密码" />

        <button type="submit" class="rayui-btn">不自动填充</button>
        <pre class="rayui-code">

    初始值：
        &lt;input type="text" class="rayui-input" placeholder="请输入用户名" value="1111" />

</pre>
    </div>

    <h3>4、有默认值情况时，使用callback函数实现不自动填充并且赋默认值-preventAutoInput(callback)</h3>
    <form id="form4" autocomplete="off">

        <input type="text" class="rayui-input" placeholder="请输入用户名" autocomplete="off" />
        <input type="text" name="useraswername" class="rayui-input" placeholder="请输入用户名" autocomplete="off" />
        <input type="password" name="dafwer" class="rayui-input" placeholder="请输入密码" autocomplete="off" />

        <button type="submit" class="rayui-btn">不自动填充</button>
    </form>
<pre class="rayui-code">

    js赋值：
    $('#form4').preventAutoInput(function(){
        //你的初始值默认方式
        $('#form4 input:first').val(':first赋默认值');
        $('#form4 input:eq(1)').val(':eq(1)赋默认值');
    });

</pre>

    <script>
        $('#form2').preventAutoInput(rayui.browser.name === '360');
        $('#form3').preventAutoInput(rayui.browser.name === '360');
        $('#form4').preventAutoInput(function () {
            $('#form4 input:first').val(':first赋默认值');
            $('#form4 input:eq(1)').val(':eq(1)赋默认值');
        }, rayui.browser.name === '360');

    </script>


    <div class="card card-color-orange">
        <p style="color:#f00">一定要注意，一定要注意，一定要注意，重要的事情说三遍</p>
        <p>对于input有默认值时，一定不能使用jquery的:first,:eq(0)这样的选择器去赋值，因为增加的input会改变原有序列，这种情况有两种解决办法：</p>
        <p>1、使用id或者class进行赋值(推荐这种方式)</p>
        <p>2、在该方法的回调函数里进行赋值，回调函数里就可以用:first,:eq(0)这样的选择器了，详见第4个例子</p>

    </div>

    <h4 id="anchor">使用说明</h4>
<pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

1、网站加载form.js引用，两种方式（前提已经加入jquery引用）
    a) 通过rayui：&lt;script src="../src/js/rayui.js" use="form">&lt;/script>
    b) 直接加载：&lt;script src="../src/js/modules/form.js">&lt;/script>
2、script标签内调用方法：$("#form1").preventAutoInput(time,callback,isStrength);
参数：time：移除时间，单位毫秒，默认500
          callback：回调函数，移除元素后回调
          isStrength：是否开启增强模式，为true时开启。某些浏览器搞特殊，如360

</pre>


    <script>
        rayui.ready(function () {

            //rayui.layer.alert(rayui.browser.name + "," + rayui.browser.version + "<br/>" + navigator.userAgent);
        })

    </script>
</body>
</html>